<template>
<div class="page">
  <div class="header1">
    <div></div>
    <div class='flex'>
      <div class='hover_b line_s'>园域集团</div>
      <div class='hover_b line_s'>产业链咨询</div>
      <div class='hover_b line_s'>产业链招商系统</div>
      <div class='hover_b line_s'>产业链数据平台</div>
      <div class='hover_b'>园域网</div>
    </div>
  </div>
  <div class="header">
    <img src="@a/img/logo.png" alt="" v-show="!isMobile">
    <img src="@a/img/logo1.jpg" alt="" v-show="isMobile">
    <div class="header_right">
      <div>产业链咨询<br>CONSULTING</div>
      <div>产业链招商系统<br>SYSTEM</div>
      <div>产业链数据平台<br>DATA</div>
    </div>
  </div>
  <!-- 轮播 -->
  <div class='lb'>
    <img src="@a/img/sw.png" alt="">
    <div class='lb_center'>领先的产业链图谱及大数据<br>精准招商服务商</div>
  </div>
  <div class='content' @mousemove.self='show(0,false)'>
    <div class='c_item' @mousemove='show(0,true)'>
      <div class='c_item_hover' :class='isshow[0]?"c_item_hover_h":""'>
        <div class='h_title'>大数据驱动精准咨询</div>
        <div class='h_abc'>Big data drives accurate consultation</div>
        <div class='jian_x'></div>
        <div class='btn'>查看详情</div>
      </div>
      <div class='f_b'>产业链咨询</div>
      <div class='f_m'>Parkic Digtal Consulting</div>
      <div class='f_m'>产业链丨产业链咨询</div>
      <div><img src="@a/img/1.png" alt=""></div>
    </div>
    <div class='c_item' @mousemove='show(1,true)'>
      <div class='c_item_hover' :class='isshow[1]?"c_item_hover_h":""'>
        <div class='h_title'>大数据和人工智能精准招商</div>
        <div class='h_abc'>Big data and AI investment attraction</div>
        <div class='jian_x'></div>
        <div class='btn'>查看详情</div>
      </div>
      <div class='f_b'>产业链招商系统</div>
      <div class='f_m'>Parkic Digtal SAAS</div>
      <div class='f_m'>产业链丨产业链招商系统</div>
      <div><img src="@a/img/2.png" alt=""></div>
    </div>
    <div class='c_item' @mousemove='show(2,true)'>
      <div class='c_item_hover' :class='isshow[2]?"c_item_hover_h":""'>
        <div class='h_title'>产业链 ( 招商 ) 数据服务平台</div>
        <div class='h_abc'>Industrial chain data service platform</div>
        <div class='jian_x'></div>
        <div class='btn'>查看详情</div>
      </div>
      <div class='f_b'>产业链数据平台</div>
      <div class='f_m'>Parkic Digtal DATA</div>
      <div class='f_m'>产业链丨产业链数据平台</div>
      <div><img src="@a/img/3.png" alt=""></div>
    </div>
  </div>
  <div class='footer'>
    <div class='f_top'>
      <div class='f_item'>
        <div class='f_title'>产业链咨询</div>
        <div class='f_text'>产业链园区咨询</div>
        <div class='f_text'>产业链招商咨询</div>
        <div class='f_text'>产业链培训咨询</div>
        <div class='f_text'>招商项目包装</div>
      </div>
      <div class='f_item'>
        <div class='f_title'>产业链咨询</div>
        <div class='f_text'>系统介绍</div>
        <div class='f_text'>招商终端</div>
      </div>
      <div class='f_item'>
        <div class='f_title'>产业链咨询</div>
        <div class='f_text'>服务介绍</div>
        <div class='f_text'>平台入口</div>
      </div>
    </div>
    <img class='c_img' src="@a/img/foot.jpg" alt="">
    <div class='lx'>
      <img src="@a/img/phone.jpg" alt="">
      <span>400-962-5108</span>
      <img src="@a/img/mail.jpg" alt="">
      <span>server@parkic.com</span>
    </div>
  </div>
  <div class='bei_an'></div>
</div>
</template>

<script>
import ICountUp from 'vue-countup-v2';
import { GetChainDetail } from '@/api/api.js'

export default {
  name: 'Home',
  data(){
    return{
      isshow:[false,false,false],
      isMobile:false
    }
  },
  components:{
    ICountUp
  },
  created(){
    this.isMobile=document.body.clientWidth<750?true:false
  },
  mounted(){

  },
  methods:{
    show(index,type){
      this.isshow=[false,false,false]
      this.isshow[index]=type
      this.isshow.push(' ')
      this.isshow.pop()
    }
  }
}
</script>
<style lang="scss" scoped>
.page{
  max-width:1500px;
  margin: 0 auto;
}
.flex{
  display:flex;
}
.hover_b{
  &:hover{
    cursor: pointer;
    color: #26C7EF;
  }
}
.header1{
  width:100%;
  padding:5px 100px;
  display:flex;
  justify-content:space-between;
  font-size:14px;
  background-color:#eee;
  div{
    margin-left:5px;
  }
  .line_s{
    position: relative;
    padding:0 5px;
    &::after{
      content:' ';
      position: absolute;
      width: 1px;
      height:80%;
      background:#888;
      top: 2px;
      right: -1px;
    }
  }
}
.header{
  width:100%;
  padding:15px 100px;
  display:flex;
  justify-content:space-between;
  align-items: center;
  box-shadow: 0px 6px 6px -6px #aaa;
  margin-bottom:10px;
  img{ 
    max-height: 50px;
  }
  .header_right{
    display:flex;
    div{
      font-size: 17px;
      text-align:center;
      margin-left: 40px;
      &:hover{
        cursor: pointer;
        color: #26C7EF;
      }
    }
  }
}
.lb{
  width:100%;
  height: 500px;
  display:flex;
  justify-content: space-around;
  img{
    width:40%;
    height:100%;
  }
  .lb_center{
    width:50%;
    height:100%;
    display:flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    font-size: 36px;
    font-weight: 600;
    color: #333;
    // letter-spacing:4px;
  }
}
.content{
  padding:100px 100px;
  display:flex;
  justify-content:space-around;
  .c_item{
    height: 450px;
    width: 26%;
    box-shadow: 0 2px 20px 0 rgb(0 ,0 ,0 ,0.3);
    text-align:center;
    position: relative;
    overflow: hidden;
    .c_item_hover{
      width:100%;
      height: 100%;
      position: absolute;
      top: 100%;
      left: 0;
      background:linear-gradient(360deg,rgba(255,177,160,0.1) 0%,#05c5f5 100%);
      transition: all 0.5s;
      cursor: pointer;
      .h_title{
        margin:100px 0 20px 0;
        color: #fff;
        font-size:22px
      }
      .h_abc{
        color: #fff;
        margin-bottom: 40px;
      }
      .jian_x{
        width:40px;
        height: 40px;
        border: 4px solid #fff;
        border-top: none;
        border-left: none;
        position: relative;
        left: 50%;
        transform: translateX(-50%) rotate(45deg);
      }
      .btn{
        width: 160px;
        height: 40px;
        border-radius: 20px;
        font-weight: 600;
        color: #fff;
        background-color:#05c5f5;
        line-height: 40px;
        font-size: 18px;
        margin:50px auto;
      }
    }
    .c_item_hover_h{
      top: 0;
    }
    .f_b{
      font-size:32px;
      font-weight: 600;
      margin:30px 0 0 0;
      color: #333;
    }
    .f_m{
      font-size:20px;
      margin:10px 0 20px 0;
    }
    img{
      width:80%
    }
  }
}
.footer{
  width:100%;
  padding:0px 100px;
  background:#39434E;
  text-align:center;
  .c_img{
    width: 400px;
  }
  .lx{
    display:flex;
    justify-content:center;
    align-items:center;
    padding: 15px 0 30px 0;
    img{
      width: 24px;
    }
    span{
      display: inline-block;
      margin: 0 20px 0 10px;
      color: #ccc;
    }
  }
  .f_top{
    display:flex;
    justify-content:space-between;
    margin-bottom:50px;
  }
  .f_item{
    width: 26%;
    position: relative;
    text-align:left;
    .f_title{
      color: #26C7EF;
      padding:5px 0;
      font-size: 16px;
      margin:50px 0 10px 0;
      border-bottom: 1.5px solid #26C7EF;
    }
    .f_text{
      margin:10px 0;
      color: #ccc;
      font-size: 16px;
      &:hover{
        color: #f93;
        cursor: pointer;
      }
    }
  }
}
.bei_an{
  width:100%;
  background-color: #23282D;
  height: 40px;
}
</style>